<template>
  <div class="element-carousel-container">
    <!-- 调试信息 -->
    <div v-if="debug" class="absolute top-4 left-4 bg-black/80 text-white px-4 py-2 rounded-lg z-50 text-xs">
      <div>图片数量: {{ bannerImages.length }}</div>
      <div>图片已加载: {{ imagesLoaded }}</div>
    </div>
    
    <el-carousel 
      v-if="bannerImages.length > 0"
      :interval="5000" 
      height="500px" 
      indicator-position="outside"
    >
      <el-carousel-item v-for="(item, index) in bannerImages" :key="index">
        <div class="carousel-item-container">
          <img 
            :src="item.image" 
            :alt="`Banner ${index + 1}`" 
            class="carousel-image"
            @error="handleImageError"
            @load="handleImageLoad"
          />
          <div class="carousel-text-container">
            <h3 class="text-xl font-bold mb-2">{{ item.title }}</h3>
            <p class="text-base opacity-90">{{ item.description }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    
    <!-- 如果没有数据，显示占位符 -->
    <div v-else class="carousel-placeholder">
      <p>加载中...</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElCarousel, ElCarouselItem } from 'element-plus'

// Props
const props = defineProps<{
  debug?: boolean
}>()

// 直接导入图片资源
import img1 from '../assets/img/1.png'
import img2 from '../assets/img/2.jpg'
import img3 from '../assets/img/3.jpg'

// 状态 - 直接在初始化时设置数据，避免延迟显示
const bannerImages = ref<Array<{ image: string; title: string; description: string }>>([
  {
    image: img1,
    title: '公司简介',
    description: '专业的电子胶粘剂解决方案提供商'
  },
  {
    image: img2,
    title: '产品展示',
    description: '多样化的产品满足不同客户需求'
  },
  {
    image: img3,
    title: '企业文化',
    description: '诚信、创新、专业、共赢'
  }
])
const imagesLoaded = ref(false)

// 图片加载成功
const handleImageLoad = (e: Event) => {
  console.log('轮播图图片加载成功')
}

// 图片加载失败
const handleImageError = (e: Event) => {
  console.error('轮播图图片加载失败:', e)
  const target = e.target as HTMLImageElement
  if (target) {
    target.style.display = 'none'
  }
}

onMounted(() => {
  // 图片加载完成
  imagesLoaded.value = true
  console.log('ElementCarousel mounted, images:', bannerImages.value)
  console.log('Image paths:', bannerImages.value.map(img => img.image))
})
</script>

<style scoped>
.element-carousel-container {
  width: 100%;
  margin: 0 auto;
  min-height: 500px;
  background-color: #f0f2f5;
}

/* 确保 el-carousel 占满容器 */
.element-carousel-container :deep(.el-carousel) {
  width: 100%;
  height: 500px;
}

.element-carousel-container :deep(.el-carousel__container) {
  height: 500px !important;
}

.element-carousel-container :deep(.el-carousel__item) {
  height: 500px;
}

.carousel-item-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-text-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  color: white;
  padding: 2rem;
  z-index: 1;
}

.carousel-placeholder {
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f2f5;
  color: #666;
  font-size: 18px;
}




</style>